<script lang="tsx">
import { ElTable } from 'element-plus'
export default {
  emits: ['sort-change', 'selection-change'],
  props: {
    data: {
      type: Array,
      default: () => []
    },
    page: {
      type: Object,
      default: () => ({})
    },
    hiddenColumns: {
      type: Set,
      default: () => new Set()
    }
  },
  methods: {
    onSortChange(data) {
      this.$emit('sort-change', data)
    },
    onSelectionChange(selection) {
      this.$emit('selection-change', selection)
    }
  },
  render() {
    const { hiddenColumns } = this

    const children = this.$slots.default ? this.$slots.default({ page: this.page }) : null
    const auth = this.$slots.auth ? this.$slots.auth() : null

    const { onSortChange, onSelectionChange } = this

    return(
      <ElTable border data={this.data} onSortChange={onSortChange} onSelectionChange={onSelectionChange}>
        { children && children.filter(i => !hiddenColumns.has(i.type.name)) }
        { auth }
      </ElTable>
    )
  }
}
</script>
